<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button default-href="/tabs/profile"></ion-back-button>
        </ion-buttons>
        <ion-title>我的机构</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <!-- 标签页 -->
      <ion-segment v-model="selectedSegment" class="segment-tabs">
        <ion-segment-button value="members">
          <ion-label>机构成员</ion-label>
        </ion-segment-button>
        <ion-segment-button value="info">
          <ion-label>机构信息</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- 机构成员页面 -->
      <div v-if="selectedSegment === 'members'" class="members-content">
        <!-- 我的信息 -->
        <div class="section">
          <h3 class="section-title">我</h3>
          <ion-card class="member-card">
            <ion-card-content>
              <div class="member-info">
                <ion-avatar class="member-avatar">
                  <ion-icon :icon="personCircleOutline" size="large"></ion-icon>
                </ion-avatar>
                <div class="member-details">
                  <h4>{{ currentUser.name }}</h4>
                  <p class="phone">{{ currentUser.phone }}</p>
                  <ion-chip color="warning" class="role-chip">
                    <ion-label>管理员</ion-label>
                  </ion-chip>
                </div>
                <ion-button fill="solid" color="warning" class="action-button">
                  实名
                </ion-button>
              </div>
            </ion-card-content>
          </ion-card>
        </div>

        <!-- 成员列表 -->
        <div class="section">
          <h3 class="section-title">成员列表</h3>
          <ion-card v-for="member in members" :key="member.id" class="member-card">
            <ion-card-content>
              <div class="member-info">
                <ion-avatar class="member-avatar">
                  <ion-icon :icon="personCircleOutline" size="large"></ion-icon>
                </ion-avatar>
                <div class="member-details">
                  <h4>{{ member.name }}</h4>
                  <p class="phone">{{ member.phone }}</p>
                  <ion-chip color="success" class="role-chip">
                    <ion-label>成员管理</ion-label>
                  </ion-chip>
                </div>
                <ion-button fill="solid" color="primary" class="action-button">
                  联系TA
                </ion-button>
              </div>
            </ion-card-content>
          </ion-card>
        </div>
      </div>

      <!-- 机构信息页面 -->
      <div v-if="selectedSegment === 'info'" class="info-content">
        <div class="section">
          <h3 class="section-title">机构详情</h3>
          <ion-card>
            <ion-card-content>
              <div class="info-item">
                <ion-label>机构名称</ion-label>
                <p>{{ organizationInfo.name }}</p>
              </div>
              <div class="info-item">
                <ion-label>机构类型</ion-label>
                <p>{{ organizationInfo.type }}</p>
              </div>
              <div class="info-item">
                <ion-label>成立时间</ion-label>
                <p>{{ organizationInfo.establishedDate }}</p>
              </div>
              <div class="info-item">
                <ion-label>成员数量</ion-label>
                <p>{{ organizationInfo.memberCount }}人</p>
              </div>
              <div class="info-item">
                <ion-label>联系电话</ion-label>
                <p>{{ organizationInfo.phone }}</p>
              </div>
              <div class="info-item">
                <ion-label>机构地址</ion-label>
                <p>{{ organizationInfo.address }}</p>
              </div>
            </ion-card-content>
          </ion-card>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButtons,
  IonBackButton,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonCard,
  IonCardContent,
  IonAvatar,
  IonIcon,
  IonChip,
  IonButton
} from '@ionic/vue'
import {
  personCircleOutline
} from 'ionicons/icons'

// 当前选中的标签页
const selectedSegment = ref('members')

// 当前用户信息
const currentUser = ref({
  name: '张三',
  phone: '15912344785'
})

// 成员列表模拟数据
const members = ref([
  {
    id: 1,
    name: '李一',
    phone: '15974584521'
  },
  {
    id: 2,
    name: '李二',
    phone: '15914526875'
  },
  {
    id: 3,
    name: '李三',
    phone: '15985633256'
  },
  {
    id: 4,
    name: '李四',
    phone: '15974752135'
  }
])

// 机构信息模拟数据
const organizationInfo = ref({
  name: '阳光房产中介',
  type: '房地产中介机构',
  establishedDate: '2020年3月15日',
  memberCount: 5,
  phone: '400-888-9999',
  address: '北京市朝阳区建国路88号现代城A座1201室'
})
</script>

<style scoped>
.segment-tabs {
  margin: 16px;
  --background: #f5f5f5;
  --indicator-color: var(--ion-color-primary);
}

.members-content,
.info-content {
  padding: 0 16px;
}

.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
  margin: 16px 0 12px 0;
}

.member-card {
  margin-bottom: 12px;
  --background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.member-details {
  flex: 1;
}

.member-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-color-dark);
}

.phone {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--ion-color-medium);
}

.role-chip {
  font-size: 12px;
  height: 24px;
}

.action-button {
  --padding-start: 16px;
  --padding-end: 16px;
  height: 32px;
  font-size: 14px;
}

.info-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item ion-label {
  font-weight: 600;
  color: var(--ion-color-dark);
  margin-bottom: 4px;
}

.info-item p {
  margin: 4px 0 0 0;
  color: var(--ion-color-medium);
  font-size: 14px;
}
</style>
